{% load i18n static %}
{% if detail %}
    <section class="image-info image-info-detail">
        <div class="image-info-title">
            <span class="icon fa {% if file %}fa-file{% else %}fa-file-image-o{% endif %}"></span> {{ original }}
        </div>
        <div class="image-details-left">
            <div class="image-preview-container">
                {% if file %}
                    <img src="{% if original.icons.48 %}{{ original.icons.48 }}{% else %}{% static 'filer/icons/missingfile_48x48.png' %}{% endif %}">
                {% else %}
                    <div class="image-preview js-focal-point" data-location-selector="#id_subject_location">
                        <img src="{{ original.thumbnails.admin_sidebar_preview }}" data-ratio="{{ adminform.form.sidebar_image_ratio }}" class="js-focal-point-image">
                        <div class="image-preview-field">
                            <div class="js-focal-point-circle image-preview-circle hidden"></div>
                        </div>
                    </div>
                {% endif %}
                <div class="text-left">
                    <a href="{{ original.url }}" target="_blank" class="btn" download="{{ original.original_filename }}">
                        {% if file %}
                            {% trans "Open file" %}
                        {% else %}
                            {% trans "Full size preview" %}
                        {% endif %}
                    </a>
                </div>
            </div>
        </div>
        <div class="image-details-right">
            {% if original.file_type or original.modified_at or original.uploaded_at or original.width or original.height or original.size %}
                <dl class="image-details">
                    {% if original.file_type %}
                        <dt>{% trans "Type" %}</dt>
                        <dd>{{ original.extension|upper }} {{ original.file_type }}</dd>
                    {% endif %}
                    {% if original.width or original.height %}
                        <dt>{% trans "Size" %}</dt>
                        <dd>{{ original.width }}x{{ original.height }} px</dd>
                    {% endif %}
                    {% if original.size %}
                        <dt>{% trans "File-size" %}</dt>
                        <dd>{{ original.size|filesizeformat }}</dd>
                    {% endif %}
                    {% if original.modified_at %}
                        <dt>{% trans "Modified" %}</dt>
                        <dd>{{ original.modified_at }}</dd>
                    {% endif %}
                    {% if original.uploaded_at %}
                        <dt>{% trans "Created" %}</dt>
                        <dd>{{ original.uploaded_at }}</dd>
                    {% endif %}
                </dl>
                <div class="image-actions">
                    <ul class="actions-list">
                        <li>
                            <span class="icon fa fa-user"></span>
                            {% if original.owner %}
                                <span class="text">{% trans "Owner" %}: <strong>{{ original.owner }}</strong></span>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            {% endif %}
        </div>
    </section>
{% else %}
    <section class="image-info">
        <a class="image-info-close"><span class="fa fa-times"></span></a>

        <div class="image-info-title">
            holiday-foto.jpg
            <a href="#" class="fa fa-pencil"></a>
        </div>

        <div class="image-preview-container">
            <div class="image-preview js-focal-point">
                <img src="http://lorempixel.com/210/266" data-ratio="4.638095" width="210" height="266" class="js-focal-point-image">
                <div class="image-preview-field">
                    <div class="js-focal-point-circle image-preview-circle hidden"></div>
                </div>
                <input type="hidden" class="js-focal-point-location">
            </div>

            <div class="text-right">
                <a href="http://lorempixel.com/210/266" target="_blank" rel="noopener noreferrer" class="btn">{% trans "Full size preview" %}</a>
            </div>
        </div>

        <ul class="image-details">
            <li class="row">
                <div class="col-xs-4">
                    {% trans "Type" %}
                </div>
                <div class="col-xs-8">
                    Image
                </div>
            </li>

            <li class="row">
                <div class="col-xs-4">
                    {% trans "Size" %}
                </div>
                <div class="col-xs-8">
                    1765x1249 px
                </div>
            </li>

            <li class="row">
                <div class="col-xs-4">
                    {% trans "File-size" %}
                </div>
                <div class="col-xs-8">
                    2.3 MB
                </div>
            </li>

            <li class="row">
                <div class="col-xs-4">
                    {% trans "Modified" %}
                </div>
                <div class="col-xs-8">
                    25/10/2015 8:02 PM
                </div>
            </li>

            <li class="row">
                <div class="col-xs-4">
                    {% trans "Created" %}
                </div>
                <div class="col-xs-8">
                    25/10/2015 8:02 PM
                </div>
            </li>
        </ul>

        <div class="image-actions">
            <ul class="actions-list">
                <li>
                    <a href="#">
                        <span class="icon fa fa-lock"></span>
                        <span class="text">This file is public</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span class="icon fa fa-user"></span>
                        <span class="text">{% trans "Owner" %}: User</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span class="icon fa fa-font"></span>
                        <span class="text">{% trans "Add Description" %}</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>
            </ul>

            <div class="actions-list-dropdown">
                <a href="#" class="js-toggler-link" data-toggler-header-selector=".actions-list-dropdown" data-toggler-content-selector=".actions-advanced">
                    {% trans "Advanced" %}
                    <span class="fa fa-caret-down caret-down"></span>
                    <span class="fa fa-caret-right caret-right"></span>
                </a>
            </div>

            <ul class="actions-list actions-advanced hidden">
                <li>
                    <a href="#">
                        <span class="icon fa fa-user"></span>
                        <span class="text">{% trans "Author" %}: User</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon fa fa-font"></span>
                        <span class="text">{% trans "Add Alt-Text" %}</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon fa fa-font"></span>
                        <span class="text">{% trans "Add caption" %}</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon fa fa-font"></span>
                        <span class="text">{% trans "Add Tags" %}</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon fa fa-picture-o"></span>
                        <span class="text">{% trans "Change File" %}</span>
                        <span class="icon fa fa-pencil"></span>
                    </a>
                </li>
            </ul>
            <ul class="actions-list">
                <li>
                    <a href="#">
                        <span class="icon fa fa-trash"></span>
                        <span class="text">{% trans "Delete" %}</span>
                    </a>
                </li>
            </ul>
        </div>
    </section>
{% endif %}
